<!-- src/views/message/CommentMessage.vue -->
<template>
  <div class="comment-message">
    <h3 class="text-lg font-semibold mb-4">评论消息</h3>
    <div v-if="commentMessages.length === 0" class="text-gray-500">暂无评论消息</div>
    <div v-for="comment in commentMessages" :key="comment.commentId" class="message-card">
      <div class="flex items-start">
        <img :src="comment.commenterAvatar" :alt="comment.commenterName" class="w-12 h-12 rounded-full mr-4">
        <div class="flex-1">
          <div class="flex justify-between">
            <h4 class="font-medium">{{ comment.commenterName }}</h4>
            <span class="text-xs text-gray-400">{{ formatDate(comment.commentTime) }}</span>
          </div>
          <p class="text-sm text-gray-600 mt-1">{{ comment.commentText }}</p>
          <div class="mt-2 bg-gray-50 p-3 rounded text-sm text-gray-600 flex items-center">
            <img :src="getRandomImage()" :alt="comment.contentTitle" class="w-16 h-16 rounded mr-3">
            <div class="flex-1">
              <p class="truncate">{{ comment.contentTitle }}</p>
            </div>
            <div class="flex items-center">
              <i class="fa fa-comment text-primary mr-1"></i>
              <span class="text-xs">{{ comment.commentCount || 1 }}</span>
            </div>
          </div>
        </div>
        <div v-if="!comment.isRead" class="ml-2">
          <span class="inline-block w-2 h-2 bg-accent rounded-full"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      commentMessages: [
        {
          commentId: 1,
          commenterId: 1,
          commenterName: '旅行日记',
          commenterAvatar: 'https://picsum.photos/id/1005/80/80',
          contentId: 1,
          contentTitle: '周末徒步旅行记',
          commentText: '这个地方看起来真美！请问具体在哪里呀？我也想去看看。',
          commentTime: new Date(),
          isRead: false,
          commentCount: 1
        },
        {
          commentId: 2,
          commenterId: 2,
          commenterName: '摄影达人',
          commenterAvatar: 'https://picsum.photos/id/1012/80/80',
          contentId: 2,
          contentTitle: '我的摄影技巧分享',
          commentText: '非常专业的分享！特别是关于光线的运用，对我帮助很大。',
          commentTime: new Date(),
          isRead: true,
          commentCount: 3
        }
      ]
    };
  },
  methods: {
    formatDate(date) {
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      return `${hours}:${minutes}`;
    },
    getRandomImage() {
      return `https://picsum.photos/${Math.floor(Math.random() * 200) + 100}/100`;
    }
  }
};
</script>

<style scoped>
.message-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 16px 24px;
  margin-bottom: 8px;
  transition: background 0.3s;
}
.message-card:hover {
  background: #f9fafc;
}
</style>
